﻿﻿
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${info.hotel_name} | 房间详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link rel="icon" href="assets/img/favicon.jpg" sizes="32x32">
    <style>
        .layui-form-select dl dd.layui-this {
            background-color: #9CCC65
        }

        .module input:not(.btn), .module .theme-select {
            background-color: floralwhite !important
        }
    </style>
</head>
<body>
<div class="wrapper">
    <!-- header -->
    <header class="header">
        <div class="header-bottom">
            <nav class="navbar navbar-universal navbar-custom">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="logo">
                                <a href="/desk/welcome" class="navbar-brand page-scroll">
                                    <img width="143px" height="49px" src="/download/${info.icon}" alt="logo">
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="navbar-header">
                                <button type="button" data-toggle="collapse" data-target=".navbar-main-collapse"
                                        class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span
                                        class="icon-bar"></span><span class="icon-bar"></span><span
                                        class="icon-bar"></span></button>
                            </div>
                            <div class="collapse navbar-collapse navbar-main-collapse">
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a href="/desk/welcome">主页</a></li>
                                    <%--                                    <li><a href="/desk/reservation" style="color: #9CCC65">房间预定</a></li>--%>
                                    <li><a href="/desk/findOrder">查询预定</a></li>
                                    <li><a href="/desk/about">关于我们</a></li>

                                    <%-- <li><a href="/desk/login">注册/登录</a></li>--%>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <!-- /header -->
    <!-- breadcrumbs -->
    <section class="breadcrumbs" style="background-image: url(assets/images/breadcrumbs/best-room.jpg)">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1 class="h1">房间详情</h1>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb">
                        <li><a href="/desk/welcome">主页</a><i class="fa fa-angle-right"></i></li>
                        <%--                        <li><a href="/desk/reservation">类型</a><i class="fa fa-angle-right"></i></li>--%>
                        <li class="active">房间详情</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <!-- /breadcrumbs -->
    <!-- room details-->
    <section class="room-detail">
        <div class="container">
            <div class="row">

                <div class="col-lg-12"><h2 class="h2">${roomInfo.name}</h2></div>
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <div class="layui-carousel" id="carousel-img">
                        <div carousel-item>
                            <c:if test="${empty roomInfo.icon}">
                                <div><img class="img-responsive" src="assets/images/gallery/1.jpg"></div>
                            </c:if>
                            <c:if test="${not empty roomInfo.icon}">
                                <div><img class="img-responsive" src="/download/${roomInfo.icon}"></div>
                            </c:if>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="room-detail_overview">
                        <table class="simple">
                            <tr>
                                <td><strong>价格:</strong></td>
                                <td>￥ <span id="price">${roomInfo.price}</span> / 晚</td>
                            </tr>
                            <tr>
                                <td><strong>大小:</strong></td>
                                <td>约${roomInfo.size}平方米</td>
                            </tr>
                            <tr>
                                <td><strong>床:</strong></td>
                                <td>${roomInfo.bednumber}张</td>
                            </tr>
                            <tr>
                                <td><strong>最多可住:</strong></td>
                                <td>${roomInfo.peoplenumber}人</td>
                            </tr>
                            <tr>
                                <td><strong>Wi-Fi:</strong></td>
                                <td>${roomInfo.iswifi==true?'免费WIFI':'无WIFI'}</td>
                            </tr>
                            <tr>
                                <td><strong>是否有窗：</strong></td>
                                <td>${roomInfo.iswindow==true?'有':'无'}</td>
                            </tr>
                            <tr>
                                <td><strong>楼层:</strong></td>
                                <td>${roomInfo.floors}</td>
                            </tr>
                            <tr>
                                <td><strong>宽带:</strong></td>
                                <td>${roomInfo.isweb==true?'有':'无'}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 marg50">
                    <div class="row reservation-top">
                        <div class="module __reservation">
                            <div class="module-block">
                                <form action="/desk/deskAddOrder" method="post" class="layui-form">
                                    <div class="row">
                                        <div class="col-md-4 col-xs-12">
                                            <input type="hidden" name="typeId" value="${roomInfo.id}">
                                            <div class="form-group">
                                                <label>入住时间</label>
                                                <input type="text" class="layui-input" id="inDate" name="inDate"
                                                       placeholder="yyyy-MM-dd" value="${reserve.inDate}" readonly
                                                >
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-xs-12">
                                            <div class="form-group">
                                                <label>退房时间</label>
                                                <input type="text" class="layui-input" id="outDate" name="outDate"
                                                       placeholder="yyyy-MM-dd" value="${reserve.outDate}" readonly
                                                >
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-xs-12">
                                            <div class="form-group">
                                                <label>房间数量</label>
                                                <div class="">
                                                    <select id="roomNumber" lay-filter="roomNumber" name="roomNumber">
                                                        <c:forEach var="rt" items="${roomType}">
                                                            <c:if test="${roomInfo.id == rt.id}">
                                                                <c:if test="${rt.counts>=10}">
                                                                    <c:forEach var="mss" begin="1" end="10" step="1">
                                                                        <option value="${mss}">${mss}</option>
                                                                    </c:forEach>
                                                                </c:if>
                                                                <c:if test="${rt.counts<10}">
                                                                    <c:forEach var="maa" begin="1" end="${rt.counts}"
                                                                               step="1">
                                                                        <option value="${maa}">${maa}</option>
                                                                    </c:forEach>
                                                                </c:if>
                                                            </c:if>
                                                        </c:forEach>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4 col-xs-12">
                                            <div class="form-group">
                                                <label>住客姓名</label>
                                                <input type="text" lay-verify="required" class="layui-input"
                                                       id="customer" name="name" placeholder="请输入住客姓名">
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-xs-12">
                                            <div class="form-group">
                                                <label>身份证号</label>
                                                <input type="text" lay-verify="required|identity" class="layui-input"
                                                       id="idNumber" name="idNumber" placeholder="请输入身份证号">
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-xs-12">
                                            <div class="form-group">
                                                <label>联系电话</label>
                                                <input type="text" lay-verify="required|phone" class="layui-input"
                                                       id="cphone" name="phone" placeholder="请输入手机号码">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-8 col-xs-12">
                                            <div class="form-group">
                                                <div style="font-size: larger;margin-top: 20px;">
                                                    <span>小计：￥</span>
                                                    <span id="allPrice"
                                                          style="color: red;">${roomInfo.price}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-xs-12">
                                            <div class="form-group">
                                                <input type="submit" lay-submit lay-filter="*"
                                                       class="btn btn-default wizzard-search-btn"
                                                       value="提交订单">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /room details -->
    <!-- footer -->
    <footer class="footer">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="footer-top_logo">
                            <a href="/desk/welcome">
                                <img width="143px" height="49px" src="/download/${info.icon}">
                            </a>
                        </div>
                        <div class="footer-top_txt">
                            <p id="web-footer-intro">${info.hotel_intro_long}</p>
                        </div>
                        <div class="footer-top_address">
                            <div><i class="fa fa-phone"></i> 电话: <span>${info.hotel_phone}</span></div>
                            <div><i class="fa fa-home"></i> 地址: <span>${info.hotel_address}</span></div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="footer-top_rooms">
                            <ul>
                                <c:forEach var="m" items="${roomType}" begin="0" end="2">
                                    <li>
                                        <div class="rooms_img">
                                            <a href="/desk/reserveOne?id=${m.id}">
                                                <c:if test="${empty m.icon}">
                                                    <img src="assets/images/footer/1.jpg">
                                                </c:if>
                                                <c:if test="${not empty m.icon}">
                                                    <img src="/download/${m.icon}">
                                                </c:if>
                                            </a>
                                        </div>
                                        <div class="rooms_info">
                                            <div class="rooms_t"><a href="/desk/reserveOne?id=${m.id}">${m.name}</a>
                                            </div>
                                            <div class="rooms_props"><span>￥${m.price}</span></div>
                                        </div>
                                    </li>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="footer-bottom_copy">Copyright &copy; 2020 huayue.com
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="footer-bottom_links">
                            <a href="/desk/welcome">主页</a>
                            <a class="active" href="javascript:;">预定</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
<!-- /footer -->
<!-- Scripts -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/layui/layui.js"></script>
<script>
    function getNewData(dateTemp, days) {
        var dateTemp = dateTemp.split("-");
        var nDate = new Date(dateTemp[1] + '-' + dateTemp[2] + '-' + dateTemp[0]); //转换为MM-DD-YYYY格式
        var millSeconds = Math.abs(nDate) + (days * 24 * 60 * 60 * 1000);
        var rDate = new Date(millSeconds);
        var year = rDate.getFullYear();
        var month = rDate.getMonth() + 1;
        if (month < 10) month = "0" + month;
        var date = rDate.getDate();
        if (date < 10) date = "0" + date;
        return (year + "-" + month + "-" + date);
    }

    function dateFormat(date) {
        return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate())
    }


    //获得天数
    function GetNumberOfDays(date1, date2) {
        //date1：开始日期，date2结束日期
        var a1 = Date.parse(new Date(date1));
        var a2 = Date.parse(new Date(date2));
        var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24));
        return day
    }

    var themeColor = "#9CCC65";

    layui.use(['form', 'laydate', 'slider', 'jquery', 'carousel'], function () {
        var form = layui.form
            , laydate = layui.laydate
            , slider = layui.slider
            , $ = layui.jquery
            , carousel = layui.carousel;
        form.render();
        //图片轮播
        carousel.render({
            elem: '#carousel-img'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
        });
        var nowDate = '${reserve.inDate}';

        <%--var startDate = laydate.render({--%>
        <%--    elem: '#inDate'--%>
        <%--    , min: 0--%>
        <%--    , max: 14--%>
        <%--    , value: nowDate--%>
        <%--    , theme: themeColor--%>
        <%--    , done: function (value, date) {--%>
        <%--        endDate.config.min = {--%>
        <%--            year: date.year,--%>
        <%--            month: date.month - 1,--%>
        <%--            date: date.date--%>
        <%--        };--%>
        <%--        $("#outDate").val(getNewData(value, 1));--%>
        <%--        checkPrice();--%>
        <%--    }--%>
        <%--});--%>

        <%--var endDate = laydate.render({--%>
        <%--    elem: '#outDate'--%>
        <%--    , min: 0--%>
        <%--    , max: 14--%>
        <%--    , theme: themeColor--%>
        <%--    , value: '${reserve.outDate}'--%>
        <%--    , done: function (value, date) {--%>
        <%--        checkPrice()--%>
        <%--    }--%>
        <%--});--%>


        form.on('select(roomNumber)', function (data) {
            checkPrice();
        })
    });


    function checkPrice() {
        var rn = $("#roomNumber").val();
        var p = $("#price").html();
        var day = GetNumberOfDays($("#inDate").val(), $("#outDate").val());
        var price = Number(rn) * Number(p) * Number(day);
        $("#allPrice").text(price.toFixed(2));
    }

</script>
<!-- /Scripts -->
</body>
</html>

